<template>
  <div>
    <div class="list_head_style" >当前区域活动批次列表</div>
    <el-table
      class="msg_table"
      :data="tableData1"
      :header-cell-style="{'text-align':'center','font-weight':'bold','font-size':'130%'}"
      :row-style="{'height':'0px','color':'grey'}" 
      :cell-style="{'padding':'7px','text-align':'center','font-size':'130%'}"
      :height="tableHeight"
      @row-dblclick="toEquipmentUnitPiMonitor()">
      <el-table-column
        prop="unit"
        label="Unit">
      </el-table-column>
      <el-table-column
        prop="activebatch"
        label="Active Batch">
      </el-table-column>
      <el-table-column
        prop="brand_sku"
        label="Brand/SKU">
      </el-table-column>
      <el-table-column
        prop="active_step"
        label="Active Step">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    beforeMount(){
      this.calHeight();
    },
    methods: {
      calHeight(){
        this.tableHeight = window.innerHeight * 0.9 * 0.8 * 0.49 * 0.83
        // console.log(this.tableHeight)
      },
      toEquipmentUnitPiMonitor(){
        this.$router.push('/equipment_unit_pi_monitor')
      },
    },
    data() {
      return {
        tableHeight:'210',
        tableData1: [{
          unit: '2016-05-03',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-02',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-04',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-01',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-08',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-06',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-07',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-07',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-07',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }, {
          unit: '2016-05-07',
          activebatch: '王小虎',
          brand_sku: '上海',
          active_step: '普陀区',
        }],
      }
    },
  }
</script>
<style lang="less" scoped>
.list_head_style{
   text-align:center;
   font-size: 130%;
   font-weight: bold;
   color:#14d288;
   margin-top: 10px;

}
.msg_table{
  width: 100%;
   /deep/.el-table__body-wrapper{
    cursor: pointer;
    overflow: auto;
    }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    border-radius: 10px;
  }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }  	
}
</style>
